.list {
  position: absolute;
  left: 50%;
  bottom: 47px;
  width: 986px;
  height: 301px;
  margin-left: -493px;
  color: #fff;
  // background-color: #080707;
  .listhd {
    background-position: 0 0;
    height: 41px;
    .listhdc {
      position: relative;
      height: 40px;
      h4 {
        position: absolute;
        left: 25px;
        top: 0;
        height: 39px;
        line-height: 39px;
        font-size: 14px;
        color: #e2e2e2;
      }
      .likeall,
      .clear {
        position: absolute;
        left: 490px;
        top: 12px;
        height: 15px;
        line-height: 15px;
        cursor: pointer;
      }
      .likeall {
        left: 398px;
        color: #ccc;
        .u-icon-playlist {
          float: left;
          margin: 1px 6px 0 0;
          width: 16px;
          background-position: -24px 0;
          height: 16px;
        }
      }
      .line {
        position: absolute;
        top: 13px;
        left: 477px;
        height: 15px;
        border-left: 1px solid #000;
        border-right: 1px solid #2c2c2c;
      }
      .clear {
        color: #ccc;
        .u-icon-playlist {
          float: left;
          margin: 1px 6px 0 0;
          width: 13px;
          background-position: -51px 0;
          height: 16px;
        }
      }
      p {
        position: absolute;
        left: 595px;
        top: 0;
        width: 346px;
        text-align: center;
        height: 39px;
        line-height: 39px;
        color: #fff;
        font-size: 14px;
      }
      .close {
        position: absolute;
        top: 6px;
        right: 8px;
        width: 30px;
        height: 30px;
        overflow: hidden;
        text-indent: -999px;
        cursor: pointer;
        background-position: -195px 9px;
      }
    }
  }
  .listbd {
    position: absolute;
    left: 0;
    top: 41px;
    width: 984px;
    height: 260px;
    overflow: hidden;
    background-position: -1014px 0;
    background-repeat: repeat-y;
    img {
      position: absolute;
      left: 2px;
      _left: 0;
      top: -360px;
      z-index: 1;
      width: 980px;
      height: auto;
      opacity: 0.2;
    }
    .msk {
      position: absolute;
      left: 2px;
      _left: 0;
      top: 0;
      z-index: 2;
      width: 558px;
      height: 260px;
      background: #121212;
      opacity: 0.5;
    }
    .listbdc {
      position: absolute;
      left: 2px;
      _left: 0;
      top: 0;
      z-index: 4;
      height: 260px;
      width: 553px;
      overflow: hidden;
      .nocnt {
        padding-top: 85px;
        text-align: center;
        line-height: 43px;
        color: #aaa;
        .u-icon-playlist {
          float: none;
          display: inline-block;
          position: relative;
          top: -4px;
          width: 36px;
          height: 29px;
          margin-right: 3px;
          background-position: -138px 0;
          vertical-align: middle;
        }
        a {
          color: #aaa;
          text-decoration: underline;
        }
      }
      ul {
        overflow: hidden;
        color: #ccc;
        margin-top: 0px;
        li {
          float: left;
          width: 100%;
          &.z-sel {
            background-color: #140f16;
            color: #fff;
            a {
              color: #fff !important;
            }
            .col-1 {
              .playicn {
                display: block;
              }
            }
            .col-5 {
              color: #fff;
            }
          }
          &:hover {
            background-color: #120e14;
            color: #fff;
            a {
              color: #fff !important;
            }
            .col-5 {
              color: #fff;
            }
          }
          &:hover .col-3 .icns {
            display: block;
          }
          .col {
            float: left;
            padding-left: 10px;
            height: 28px;
            line-height: 28px;
            overflow: hidden;
            cursor: pointer;
          }
          .col-1 {
            width: 20px;
            .playicn {
              display: none;
              margin-top: 8px;
              width: 10px;
              height: 13px;
              background-position: -182px 0;
            }
          }
          .col-2 {
            width: 266px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: left;
          }
          .col-3 {
            width: 88px;
            position: relative;
            .icns {
              display: none;
              position: absolute;
              right: 0;
              top: 0;
              width: 100px;
              height: 23px;
              .u-icon-playlist {
                float: right;
                overflow: hidden;
                margin: 7px 0 0 10px;
                text-indent: -9999px;
                height: 16px;
              }
              .del {
                float: right;
                overflow: hidden;
                margin: 7px 0 0 10px;
                text-indent: -9999px;
                width: 13px;
                background-position: -51px 0;
                &:hover {
                  background-position: -51px -20px;
                }
              }
              .dl {
                width: 14px;
                background-position: -57px -50px;
                &:hover {
                  background-position: -80px -50px;
                }
              }
              .share {
                width: 14px;
                background-position: 0 0;
                &:hover {
                  background-position: 0 -20px;
                }
              }
              .like {
                width: 16px;
                background-position: -24px 0;
                &:hover {
                  background-position: -24px -20px;
                }
              }
            }
          }
          .col-4 {
            width: 80px;
            text-align: left;
            a {
              color: #9b9b9b;
            }
          }
          .col-5 {
            width: 45px;
            color: #666;
          }
          .col-6 {
            width: 47px;
            padding-left: 6px;
            .link {
              // display: inline-block;
              width: 14px;
              // height: 16px;
              margin-left: 0;
              background-position: -80px 0px;
            }
          }
        }
      }
    }
    .bline {
      position: absolute;
      left: 555px;
      top: -1px;
      z-index: 2;
      width: 6px;
      height: 260px;
      background: #000;
      opacity: 0.5;
      .scroll {
        position: absolute;
        left: 0;
        top: 0px;
        width: 6px;
        border-radius: 5px;
        height: 100px;
        cursor: pointer;
        background: #868686;
        border: 1px solid #a6a6a6;
        opacity: 0.8;
      }
    }
    .ask {
      position: absolute;
      right: 25px;
      top: 12px;
      cursor: pointer;
      z-index: 5;
      .u-icon-playlist {
        display: inline-block;
        width: 21px;
        height: 21px;
        background-position: 0 -50px;
        text-indent: 0;
      }
    }
    .upload {
      position: absolute;
      right: 12px;
      top: 40px;
      box-shadow: 0 2px 3px rgb(0 0 0 / 75%);
      width: 81px;
      z-index: 5;
      // display: none;
      .colse {
        display: block;
        text-align: center;
        padding: 8px 0;
        color: #666;
        background: #ebebeb;
        text-shadow: 0 1px 0 #fff;
      }
    }
    .msk2 {
      position: absolute;
      left: 560px;
      _left: 560px;
      top: 0;
      z-index: 3;
      width: 420px;
      height: 250px;
      background: #121212;
      opacity: 0.01;
    }
    .listlyric {
      position: absolute;
      right: 40px;
      top: 0;
      z-index: 4;
      margin: 21px 0 20px 0;
      height: 219px;
      width: 354px;
      overflow: hidden;
      p {
        color: #989898;
        word-wrap: break-word;
        text-align: center;
        line-height: 32px;
        height: auto !important;
        height: 32px;
        min-height: 32px;
        &.current {
          color: #fff;
          font-size: 14px;
        }
      }
      .pure {
        margin-top: 100px;
        p {
          color: #fff;
        }
      }
    }
    .bline-1 {
      left: auto;
      right: 0px;
    }
  }
}
